<template>
    <div class="Top">
        <div class="w1440">
            <div class="fl d-flex a-center">
                <div class="Logo">
                    <router-link to="/" tag="a" class="d-block"><img src="../assets/uploadfiles/image/logo.png"
                            alt="">云南三益文化国防基金会社区<span v-if="false" class="cityname">（昆明市）</span></router-link>
                </div>
                <!-- 菜单 -->
                <div v-if="token" class="menu-box">
                    <nav>
                        <ul class="ul d-flex a-center">
                            <li class="pr" v-for="(item, index) in categoryArr" :key="index">
                                <a class="son-a">{{ item.name }}
                                    <span class="ml10"><el-icon>
                                            <ArrowDown />
                                        </el-icon></span>
                                </a>
                                <div v-show="item.plateList.length" class="sub-menu">
                                    <div class="sub-children">
                                        <router-link :to="'/PartPost?id=' + sub.id + '&name=' + sub.title" tag="a"
                                            v-for="(sub, subIndex) in item.plateList" :key="subIndex">{{ sub.title
                                            }}</router-link>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- <div class="selectCity fr">
        <div class="name">昆明市<i></i></div>
        <ul class="scroll">
          <li><a href="index_city.shtml">昆明市</a></li>
        </ul>
      </div> -->
            <div v-show="!token" class="topbtn fr">
                <router-link to="/login" tag="a" class="login">登录</router-link>
                <router-link to="/register" tag="a"
                    class="register">注册</router-link>
            </div>
            <div v-if="token" class="top_person fr pr">
                <router-link to="/userInfo" tag="a">
                    <div class="top_person_box">
                        <div class="img imgbox"><span><img src="../assets/uploadfiles/image/logo.png" alt=""></span>
                        </div>
                        <div class="name">{{ userInfoCommon.username }}</div>
                    </div>
                </router-link>
                <div class="drop-box">
                    <router-link to="/userinfo" tag="a" class="pointer">个人中心</router-link>
                    <a @click="logout" class="pointer">退出</a>
                </div>
            </div>
            <div v-if="token" class="notice_num fr">
                <router-link to="/message">
                    <div class="icon"><img src="../assets/images/xxico.svg" alt=""></div>
                    <span class="num" v-show="message">{{message}}</span>
                </router-link>
            </div>

            <div v-if="token" class="release_btn fr">
                <div class="name"><router-link to="/publishUpdates"><img src="../assets/images/fbico.png"
                            alt="">去发帖</router-link>
                </div>
            </div>
            <div v-if="token" class="release_btn fr mr25">
                <router-link tag="a" to="/drafts" class="name"><img src="../assets/images/cgxBtn.png"
                        alt="">草稿箱</router-link>
            </div>
            <div v-if="token" class="search fr">
                <el-input v-model="keyword" placeholder="搜索帖子/博主" ref="searchInput" @clear="clearKeyword" @keyup.enter="goToSearch" @change="goToSearch" style="width: 240px" :prefix-icon="Search" clearable />
                <!-- <input type="text" placeholder="搜索帖子/博主"> -->
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</template>


<script setup name="Header">
import { postApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, onBeforeUnmount } from 'vue';
import { useCommonStore } from '@/store/Common';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';


// 路由
const router = useRouter();

// 公共store
const commonStore = useCommonStore();
// 读取 store 中的内容
const { token, userInfoCommon, message } = storeToRefs(commonStore);

/**
 * @name Data
 */
const keyword = ref(''); // 搜索关键词
const searchInput = ref(null);
/**
 * @name 搜索
 */
const goToSearch = function () {
    if(keyword.value.trim() == '') return ElMessage.error('请输入搜索关键词');
    if (keyword.value) {
        // 让输入框失去焦点
        searchInput.value.blur();
        router.push('/search?keyword=' + keyword.value);
    }
}
const clearKeyword = () => {
    keyword.value = '';
    router.push('/search?keyword=');
}

/**
 * @name 生命周期
 */
onBeforeMount(() => {
    getCategoryList();
})

/**
 * @name 获取菜单
 */
const categoryArr = ref([]); // 分类
const getCategoryList = function () {
    postApi.getCategoryList().then((res) => {
        categoryArr.value = res.data;
    }).catch((err) => { })
}

// 方法

// 退出登录
function logout() {
    sessionStorage.removeItem('token');
    token.value = '';
    router.push('/login');
}

</script>


<style lang="less" scoped>
.top_person {
    &:hover {
        .drop-box {
            display: block;
        }
    }

    .drop-box {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        background: #fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        display: none;
        padding: 5px 10px;

        a {
            display: block;
            padding: 10px;
            text-align: center;
            line-height: 1;
        }
    }
}

.menu-box {
    margin-left: 50px;

    ul {
        li {
            &:not(:last-child) {
                margin-right: 20px;
            }

            &:hover {
                .sub-menu {
                    display: block;
                }
            }

            .son-a {
                font-size: 16px;

                span {
                    font-size: 14px;
                    color: #999;
                }

                &:hover {
                    span {
                        color: #00753e;
                    }
                }
            }

            .sub-menu {
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                display: none;

                .sub-children {
                    padding: 10px;
                    background: #fff;
                    border-radius: 5px;
                    box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
                    min-width: 170px;
                    margin-top: 5px;
                }

                a {
                    display: block;
                    text-align: center;
                    padding: 12px 0;
                    line-height: 1;

                    &:not(:last-child) {
                        border-bottom: 1px solid #eee;
                    }
                }
            }
        }
    }
}
</style>